<script setup>
import { ref } from 'vue';

// 选择节点
const handleSelectedNodes = () => {
    visible_nodes.value = true;
};
const visible_nodes = ref(false);
const nodes = ref([]);
const columns = [
    { field: 'name', header: '主机名' },
    { field: 'type', header: '类别' }
];
const data = [
    ['John1', 30],
    ['Alice1', 28],
    ['Bob1', 25]
];
nodes.value = data.map((item) => {
    item;
});

//命令
</script>
<template>
    <div class="card">
        <div class="formgrid grid">
            <div class="field col-4">
                <label for="firstname2">节点</label>
                <input
                    readonly
                    style="cursor: pointer"
                    placeholder="选择节点..."
                    id="firstname2"
                    type="text"
                    class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
                    @click="handleSelectedNodes"
                />
            </div>
            <div class="field col-8">
                <label for="lastname2">命令</label>
                <input
                    style="cursor: pointer"
                    placeholder="ex:lx-l"
                    id="lastname2"
                    type="text"
                    class="text-base text-color surface-overlay p-2 border-1 border-solid surface-border border-round appearance-none outline-none focus:border-primary w-full"
                />
            </div>
        </div>

        <div class="flex gap-3">
            <Button label="运行" severity="secondary" outlined size="small" />
            <Button label="清除" severity="secondary" outlined size="small" />
        </div>
    </div>
    <Dialog v-model:visible="visible_nodes" header="节点选择">
        <DataTable :value="nodes" tableStyle="min-width: 50rem">
            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
            <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header"></Column>
        </DataTable>
    </Dialog>
</template>
<style scoped lang="scss"></style>
